<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哆啦A梦70%</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html body{
            background-color: burlywood;
        }
        .duo-la-A-meng{
            width: 520px;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin-left: 500px;
            position: relative;
        }
        .head{
            width: 425px;
            height: 375px;
            /* background-color: #0eacd8; */
            border-radius: 200px / 215px;
            border: 2px solid #5a6062;
            box-shadow: 0px 10px 20px #636363;
            display:flex;
            position: relative;
            justify-content:center;
            background: linear-gradient(to right top,#0a758f,#07baed);
        }
        .eye{
            width: 100px;
            height: 110px;
            border-radius: 45px / 35px;
            border: 2px solid #5a6062;
            background-color: white;
            position:relative;
        }
        .left-eyeball{
            width: 16px;
            height: 16px;
            border-radius: 16px;
            background-color: black;
            position:absolute;
            left: 60px;
            top:50px;
        }
        .right-eyeball{
            width: 16px;
            height: 16px;
            border-radius: 16px;
            background-color: black;
            position:absolute;
            top:50px;
            left:10px
        }
        .eyes{
            width: 185px;
            height: 105px;
            display: flex;
            position: relative;
            top:55px;
            z-index: 2;
        }
        .nose{
            width: 45px;
            height: 45px;
            background-color: #c93400;
            border-radius: 20px / 15px;
            border: 3px solid #181c1e;
            box-sizing: border-box;
            position: absolute;
            top: 150px;
            z-index: 1;
        }
        .face{
            width: 350px;
            height: 245px;
            border-radius: 120px / 120px;
            background-color: white;
            position: absolute;
            top: 100px;
        }
        .tie-box{
            width: 425px;
            display: flex;
            position: relative;
            justify-content: center;
            top: -30px;
        }
        .tie{
            width: 310px;
            height: 30px;
            background-color: #b63200;
            border-radius:15px;
            border: 3px solid #0f0f0f;
            position: relative;
            display: flex;
            justify-content: center;
            z-index: 5;
        }
        .bell{
            width: 50px;
            height: 50px;
            border-radius:25px;
            background-color: #e3dc17;
            box-sizing: border-box;
            border:3px solid #020000;
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
            top: 10px;
            z-index: 2;
        }
        .bell div:nth-child(1){
            margin-top: 10px;
            width: 100%;
            height: 0px;
            border:2px solid #3c3b33;
            border-bottom: 1px solid #3c3b33;
        }
        .bell div:nth-child(2){
            width: 100%;
            height: 0;
            border:1px solid #3c3b33;
            border:2px solid #3c3b33;
            border-bottom: 1px solid #3c3b33;
            margin-top: -5px;
        }
        .bell div:nth-child(3){
            width: 15px;
            height: 10px;
            background-color: #000000;
            border-radius:7px / 5px;
            margin-top: -10px;
            justify-self: center;
        }
        .bell div:nth-child(4){
            width: 4px;
            height: 15px;
            background-color: #000000;
            position:absolute;
            top: 35px;
        }
        .hand{
            width: 80px;
            height: 80px;
            background-color: white;
            border-radius:60px;
            border:3px solid #000000;
            position: absolute;
        }
        .foot{
            width: 170px;
            height: 45px;
            border-radius:18px 20px 20px 25px / 30px 25px 25px 15px;
            background-color: white;
            border:3px solid #000000;
            position: absolute;
            bottom: -16px;
        }
        .beard{
            width: 310px;
            height: 80px;
            /* position: relative; */
            position: absolute;
            top: 185px;
            display: flex;
        }
        .left-beard{
            width: 155px;
            height: 90px;
            float: left;
            background-color: white;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
        }
        .left-beard div:nth-child(1){
            width: 80px;
            height: 3px;
            background-color: #3a3a3a;
            transform-origin: 80px 0 0;
            transform: rotate(23deg);
            margin-bottom: 5px;
        }
        .left-beard div:nth-child(2){
            width: 80px;
            height: 4px;
            background-color: #3a3a3a;
            transform-origin: 80px 0 0;
            transform: rotate(0deg);
            margin-bottom: 5px;
        }
        .left-beard div:nth-child(3){
            width: 80px;
            height: 3px;
            background-color: #3a3a3a;
            transform-origin: 80px 0 0;
            transform: rotate(-23deg);
        }
        .right-beard{
            width: 155px;
            height: 90px;
            float: left;
            background-color: white;
            padding-left: 0px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .right-beard div:nth-child(1){
            width: 80px;
            height: 3px;
            background-color: #3a3a3a;
            transform-origin: 0px 0 0;
            transform: rotate(-23deg);
            margin-bottom: 5px;
        }
        .right-beard div:nth-child(2){
            width: 80px;
            height: 4px;
            background-color: #3a3a3a;
            transform-origin: 0px 0 0;
            transform: rotate(0deg);
            margin-bottom: 5px;
        }
        .right-beard div:nth-child(3){
            width: 80px;
            height: 3px;
            background-color: #3a3a3a;
            transform-origin: 0px 0 0;
            transform: rotate(23deg);
            /* margin-bottom: 10px; */
        }
        .body{
            width: 300px;
            height: 230px;
            position: relative;
            top: -35px;
        }
        .body-top{
            width: 300px;
            height: 65px;
            background:linear-gradient(
                to right,
                #0096be 0%,
                #0075b4 50%,
                #06bde9 100%
            );
            position: relative;
            z-index: 1;
        }
        .body-bottom{
            width: 300px;
            height: 165px;
            background:linear-gradient(
                to right,
                #0096be 0%,
                #0075b4 50%,
                #06bde9 100%
            );
            border-left: 3px solid #434242;
            box-sizing: border-box;
            border-right: 3px solid #434242;
            display: flex;
            justify-content: center;
            align-items:flex-end;
            position: absolute;
            z-index: 2;
        }
        .body-bottom :nth-child(1){
            width: 30px;
            height: 15px;
            border-radius: 15px 15px 0 0/ 15px 15px 0 0;
            background-color: white;
        }
        .left-arm{
            width: 90px;
            height: 85px;
            transform-origin: 0px 35px 0;
            transform: rotate(155deg);
            background-color: #0096be;
            position: absolute;
            top: -5px;
            left: 15px;
        }
        .right-arm{
            width: 110px;
            height: 85px;
            transform-origin: 0px 35px 0;
            transform: rotate(25deg);
            background-color: #09bfea;
            position: absolute;
            top: -20px;
            right: -95px;
        }
        .pokect-box{
            width: 236px;
            height: 216px;
            border-radius: 118px / 108px;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: end;
            border: 3px solid #100501;
            position: absolute;
            z-index: 3;
            top: -30px;
            left: 30px;
        }
        .pokect{
            width: 174px;
            height: 84px;
            border-radius:0px 0px 87px 87px ;
            /* background-color: #0096be; */
            margin-bottom: 30px;
            border: 3px solid #100501;
        }
    </style>
</head> 
<body>
    <div class="duo-la-A-meng">
        <div class="head">
            <div class="eyes">
                <div class="eye"><div class="left-eyeball"></div></div>
                <div class="eye"><div class="right-eyeball"></div></div>
            </div>
            <div class="nose"></div>
            <div class="face"></div>
            <div class="beard">
                <div class="left-beard">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="right-beard">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="tie-box">
            <div class="tie">
                <div class="bell">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>   
        </div>
        <div class="body">
            <div class="body-top"></div>
            <div class="left-arm">
                <div class="hand" style="left: 60px;"></div>
            </div>
            <div class="right-arm">
                <div class="hand" style="right: -50px;"></div>
            </div>
            <div class="pokect-box">
                <div class="pokect"></div>
            </div>
            <div class="body-bottom">
                <div></div>
            </div>
        </div>
        <div class="foot" style="left: 83px;"></div>
        <div class="foot" style="right: 83px;"></div>
    </div>
</body>
</html>